{% extends "base.html" %}
{% block stylesheet %}
  <link rel="stylesheet" type="text/css" href="/site_media/css/search.css" />
{% endblock %}

{% block script %}
  <script type="text/javascript" src="/site_media/js/search.js"></script>
{% endblock %}
{% block title %}| {% endblock %}
{% block content %}
        <div id="search-content">
            <div id="content-navigation">
                <a href="/">Home</a> >> Search
            </div><!-- the end for content-navigation -->
            <div id="search-filter-block">
                <form action="" method="get">
                   <p style="font-size:16px;">Keyword: <input type="text" name="searchkeyword" id="search-keyword-text" size=60 value='{{searchform.keyword}}' /><input type="submit" value="Search" /></p>
                   <p>Categories:
                      <span class="category-item">
                        {% ifequal searchform.category_value '' %}
                        <input type="radio" name="category" value="" checked="checked" />All
                        {% else %}
                        <input type="radio" name="category" value="" />All  
                        {% endifequal %}
                      </span>
                    {% for category in categories %}
                      <span class="category-item">
                        {% ifequal searchform.category_value category.name %}
                        <input type="radio" name="category" value="{{category.name}}" checked="checked" />{{category.name}}
                        {% else %}
                        <input type="radio" name="category" value="{{category.name}}"/>{{category.name}} 
                        {% endifequal %}  
                      </span>
                    {% endfor %}
                   </p>
                    {% if searchform.subcategories %}
                    <p id="select-subcategories-p">Subcategories: 
                        {% for subcategory in searchform.subcategories %}
                            <span class="subcategory-item"><input type="checkbox" name="subcategory{{subcategory.name}}" value="{{subcategory.id}}"
                            {% for checked in searchform.checked_subcategories%}
                                {% ifequal checked subcategory.name %}
                                 checked="checked"
                                {% endifequal%}
                            {% endfor %}
                             />{{subcategory.name}}</span>
                        {% endfor %}
                    </p>
                    {% else %}
                    <p id="select-subcategories-p" style="display:none"></p>
                    {% endif %}
                   
                   <p>Sort by: <select name="sorted-type">
                        {% ifequal searchform.sorted_type 'pricel2h' %}
                        <option value="pricel2h" selected='selected' >Price from low to hight</option>
                        {% else %}
                        <option value="pricel2h" >Price from low to hight</option>  
                        {% endifequal %}
                        {% ifequal searchform.sorted_type 'priceh2l' %}
                        <option value="priceh2l" selected='selected' >Price from hight to low</option>
                        {% else %}
                        <option value="priceh2l">Price from hight to low</option>
                        {% endifequal %}
                        {% ifequal searchform.sorted_type 'rate' %}
                        <option value="rate" selected='selected' >Rate from hight to low</option>
                        {% else %}
                        <option value="rate">Rate from hight to low</option>
                        {% endifequal %}
                        {% ifequal searchform.sorted_type 'sales' %}
                        <option value="sales" selected='selected' >Sales from hight to low</option>
                        {% else %}
                        <option value="sales">Sales from hight to low</option>
                        {% endifequal %}                        
                      </select>
                   </p>
                </form>
            </div><!-- the end for search-filter-block -->
            <div id="search-results">
                {% if results %}
                    {% for result in results %}
                <div class="pruduct-item">
                    <div class="product-info" style="width: 152px; height: 102px;">
                        <center><img src="/{{ result.image }}" class="product-image" /></center>
                    </div>
                    <div class="product-info" style="width: 200px;">
                        <p class="product-title"><a href="/products/{{result.id}}">{{ result.name }}</a></p>
                        <p class="product-short-description">{{ result.shortDescription }}</p>
                    </div>
                    <div class="product-info" style="text-align:center; width:150px;">
                        <p class="product-price">{{ result.price }}€</p>
                    </div>
                    <div class="product-info" style="width:220px;">
                        <p class="product-rate">
                        {% if result.rate_img %}
                            <img src="/site_media/images/rate-{{result.rate_img}}.jpg"/>{{result.product_rates_value.value}}
                        {% else %}
                            <img src="/site_media/images/rate-0.jpg"/>
                        {% endif %}
                        </p>
                        <p class="product-comments"><a href="/products/{{result.id}}/#comments">Comments({{ result.comments.all|length }})</a></p>
                    </div>
                </div>
                    {% endfor %}
                <div id="search-results-page">
                    <p>
                        {% include "page_bar.html" %}
                    </p>
                </div>
                {% else %}
                <div id="no-result-div"><p>No search results.</p></div>
                {% endif %}
            </div><!-- the end for search-results -->
        </div><!-- the end for search-content -->
{% endblock %}
